<script lang="ts" setup name="B18LifeCycle">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";

const sum = ref(0);

console.log("setup 创建");

onBeforeMount(() => {
  console.log("onBeforeMount()  挂载前");
});

onMounted(() => {
  console.log("onMounted() 挂载完毕");
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate() 更新前");
});

onUpdated(() => {
  console.log("onUpdated() 更新完毕");
});

onBeforeUnmount(() => {
  console.log("onBeforeUnmount() 卸载前");
});

onUnmounted(() => {
  console.log("onUnmounted() 卸载完毕");
});

const incrSum = () => {
  sum.value += 1;
};
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">生命周期</h1>
  <div class="my-3">
    <div>当前求和：{{ sum }}</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="incrSum">sum+1</button>
  </div>
</template>
